<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>
    <style>
        .skyblue{
            color: skyblue
        }

        .pink{
            color: pink
        }

        .aqua{
            background: aqua
        }

        .bold{
            font-weight: bold;
        }

        .italic{
            font-style: italic;
        }

        .bg{
            background: lightgreen;
        }

        .isActive{
            display: block;
        }

        .noActive{
            display: none;
        }
    </style>
<body>

    <!-- 
        style/class/value/自定义属性等都可以使用v-bind绑定 
        v-bind 可简化为  :
    -->

    <!-- 创建容器 -->
    <div id="app">
        <!-- 插值语法,数据保存在data或者直接保存在实例vm上 -->
        <h1 :style="h1Style">{{title}}</h1>
        <h1 :style="styleArr" :class="isActive?'isActive':'noActive'">{{title+1}}</h1>
        <h1 :style="{background:bg}">{{title+2}}</h1>
        <h1 style="width:100px;height:200px" :style="styleArr">{{title+3}}</h1>
        <p style="width:200px;height:200px" :class="bold">{{title+4}}</p>
    </div>
    <script>
        //实例化一个vm,Vue是MVVM模型中的核心
        //Vue是一个构造函数 使用时需实例化
        const vm = new Vue({
            // el:string | selector
            el: "#app",
            // data:Object|function
            data() {
                return {
                    title: "vue",
                    h1Style: {
                        background: "skyblue",
                        fontWeight: "bold",
                        fontStyle: "italic",
                        color: "pink"
                    },
                    styleArr: [
                            {width: "100px"},
                            {height: "100px"},
                            {color: "pink"},
                    ],
                    bg: "lightgreen",
                    
                    isActive: false,
                    bold: true
                }
            }
        })
    </script>
</body>

</html>